<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>

    /* div {
        width: 100px;
        height: 100px;
        border: 1px red solid;
    } */

    #first {
        width: 960px;
        height: 120px;
        position: relative;
        top: 20px;
        left: 200px;
    }

    #second {
        width: 101px;
        height: 48px;
        background-image: url('image/logo.jpg');
        float: left;
    }

    #three {
        width: 400px;
        height: 48px;
        float: right;
        margin-top: 10px;
    }

    ul {
        float: right;
        list-style-type: none;
    }

    #first li {
        float: left;
        width: 70px;
        line-height: 35px;
        text-align: center;
        background: rgb(206, 238, 227);
        border-top: 1px rgb(174, 233, 162) solid;
        font-size: 0.8em;
    }

    #four {
        float: left;
        background-image: url(image/icon_count.png);
        width: 45px;
        height: 16px;
        position: relative;
        top: 7px;
        left: 130px;
    }

    #five {
        width: 960px;
        height: 120px;
        position: relative;
        top: -50px;
        left: 200px;
    }

    #five ul{
        width: 960px;
        height: 40px;
    }

    #five li {
        float: left;
        width: 56.4px;
        line-height: 40px;
        text-align: center;
        background: rgb(233, 109, 7);
        font-size: 0.8em;
        color: white;
    }

    #six {
        width: 960px;
        height: 120px;
        position: relative;
        top: -105px;
        left: 200px;
        background-image: url(image/banner.png);
    }

    #senven {
        border: 2px rgb(128, 194, 97) solid;
        width: 960px;
        height: 360px;
        position: relative;
        top: -90px;
        left: 198px;
    }

    #eight {
        width: 240px;
        height: 39px;
        position: relative;
        top: -435px;
        left: 187px;
        background-image: url(image/bg_bang.gif);
    }

    #nine {
        width: 600px;
        height: 270px;
        position: relative;
        top: -410px;
        left: 200px;
    }

    #nine_1 {
        float: right;
        width: 335px;
        height: 260px;
    }

    #ten {
        width: 380px;
        height: 130px;
        position: relative;
        top: -680px;
        left: 780px;
    }

    #ten_1 {
        float: right;
        width: 275px;
        height: 130px;
    }

    #eleven {
        width: 380px;
        height: 130px;
        position: relative;
        top: -680px;
        left: 780px;
    }

    #eleven_1 {
        float: right;
        width: 275px;
        height: 130px;
    }

    #bookNo1 {
        width: 27px;
        height: 48px;
        background-image: url(image/bookNo1.gif);
        position: relative;
        top: -950px;
        left: 220px;
    }

    #bookNo2 {
        width: 28px;
        height: 37px;
        background-image: url(image/bookNo2.gif);
        position: relative;
        top: -1000px;
        left: 782px;
    }

    #bookNo3 {
        width: 27px;
        height: 36px;
        background-image: url(image/bookNo3.gif);
        position: relative;
        top: -910px;
        left: 782px;
    }

    #twelve {
        width: 960px;
        height: 40px;
        position: relative;
        top: -780px;
        left: 200px;
    }
</style>

<body>

    <div id="first" >
        <div id="second"></div>
        <div id="three">
            <div id="four"></div>
            <ul>
                <li style="border-left: 1px rgb(174, 233, 162) solid">尾品汇</li>
                <li>当当优品</li>
                <li>数字馆</li>
                <li style="border-right: 1px rgb(174, 233, 162) solid">都看阅器</li>
            </ul>
        </div>
    </div>
    
    <div id="five">
        <ul>
            <li>首页</li>
            <li>图书</li>
            <li>音像</li>
            <li>童装</li>
            <li>服装</li>
            <li>鞋靴</li>
            <li>运动</li>
            <li>箱包</li>
            <li>美妆</li>
            <li>珠宝</li>
            <li>家具</li>
            <li>食品</li>
            <li>酒</li>
            <li>手机</li>
            <li>数码</li>
            <li>电脑</li>
            <li>家电</li>
        </ul>
    </div>
    <div id="six"></div>
    <div id="senven"></div>
    <div id="eight"></div>

    <div id="nine">
        <img id="image1" src="image/book-01.jpg" width="260px" height="260px" align="top"/>
        <div id="nine_1">
            <p style="color: blue;font-size: 0.8em;">偷影子的人</p>
            <p style="font-size: 0.6em;line-height: 25px;">作者：[法]马克·李维（Marc Levy）著<br>
                出版社：湖南文艺出版社<br>
                当当价：<span style="color:saddlebrown;"><b>¥ 17.90</b></span><br>
                不知道姓氏的克蕾儿。这就是你在我生命里的角色，<br>
                我童年时的小女孩，今日蜕变成了女人，一段青梅竹<br>
                马的回忆，一个时间之神没有应允的愿望。一个老<br>
                是受班上同学欺负的瘦弱小男孩，因为拥有一种特殊<br>
                能力而强大：他能"偷别人的影子"
            </p>
        </div>
    </div>

    <div id="ten">
        <img id="image2" src="image/book-02.jpg" width="100px" height="100px" align="top"/>
        <div id="ten_1">
            <p style="color: blue;font-size: 0.8em;line-height: 15px;">看见(央视知名记者、主持人柴静：十年个人)<br>
                成长的告白，中国社会变迁的备忘
            </p>
            <p style="font-size: 0.6em;line-height: 25px;">作者：柴静 著<br>
                出版社：广西师范大学出版社<br>
                <span style="color:saddlebrown;"><b>¥ 29.40</b></span>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: mediumaquamarine;">7.4折</span>
            </p>
        </div>
    </div>

    <div id="eleven">
        <img id="image3" src="image/book-03.jpg" width="100px" height="100px" align="top"/>
        <div id="eleven_1">
            <p style="color: blue;font-size: 0.8em;">改变孩子先改变自己</p>
            <p style="font-size: 0.6em;line-height: 25px;">作者：贾容韬 贾毅 著<br>
                出版社：作家出版社<br>
                <span style="color:saddlebrown;"><b>¥ 22.20</b></span>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: mediumaquamarine;">7.4折</span>
            </p>
        </div>
    </div>

    <div id="bookNo1"></div>
    <div id="bookNo2"></div>
    <div id="bookNo3"></div>
    
    <div id="twelve" style="text-align: center;">
        <span style="font-size: 0.6em;color: rgb(113, 121, 113);">Copyright（C）当当网 2004-2017，All Rights Reserved</span>
        <img src="image/validate.gif" align="center"/>
        <span style="font-size: 0.6em;color: rgb(113, 121, 113);">京ICP证041189号出版物经营许可证 新出发京批字第直0673号</span>
    </div>
</body>
</html>